<template>
	<uni-swiper-dot class="banner-swiper-dot" :info="bannerImgList" field="content" mode="">
		<swiper class="swiper-box" autoplay="true" :indicator-dots="true">
			<swiper-item v-for="(banner_item, index) in bannerImgList" :key="index">
				<view class="banner-bannerImg"><image class="banner-bannerImg" :src="banner_item.pictureUrl" @click="gotoLinkUrl(banner_item.linkUrl)"></image></view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script>
export default {
	props: {
		type: {
			type: Number | String,
			default: 0
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		}
	},

	data() {
		return {
			bannerImgList: [],
			bannerImgCurrent: 0
		};
	},
	created() {
		this.queryBannerList();
	},
	methods: {
		queryBannerList() {
			this.$api.queryBannerList({
				params:{
					type:this.type
				}
			}).then(res => {
				if (res.code == 200) {
					console.log(res);
					this.bannerImgList = res.result;
				}
			});
		},
		gotoLinkUrl(linkUrl) {
			if (linkUrl == 'home') {
				this.$Router.replace({
					name: 'index',
					params: {
						index: 0
					}
				});
			} else if (linkUrl == 'report') {
				this.$Router.replace({
					name: 'index',
					params: {
						index: 1
					}
				});
			} else if (linkUrl == 'merchantCenter') {
				this.$Router.replace({
					name: 'index',
					params: {
						index: 2
					}
				});
			} else {
				this.$Router.push({
					name: linkUrl
				});
			}
		}
	}
};
</script>

<style lang="less">
.banner-swiper-dot {
	// margin: 20rpx auto;
	width: 100%;
	height: 306rpx;
	box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
	.swiper-box {
		border-radius: 16rpx;
		width: 100%;
		height: 306rpx;
		background: #ffffff;
		.banner-bannerImg {
			border-radius: 16rpx;
			display: block;
			width: 100%;
			height: 306rpx;
			margin: 0 auto;
		}
	}
}
</style>
